<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, no-store" />
<title>NET355 - ${noteTitle}</title>
<jsp:include page="/resource/pages/key.html"></jsp:include>
<meta content="${noteTitle} - ${keyTags}" name="description" />
<link href="/resource/css/common.css" rel="stylesheet" type="text/css" />
<link href="/resource/css/index.css" rel="stylesheet" type="text/css" />
<link href="/resource/css/toolkit.css" rel="stylesheet" type="text/css" />
<link href="/resource/js/matchpicker/matchpicker.css" rel="stylesheet" type="text/css" />
<link href="/resource/js/datepicker/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/resource/js/jquery.js"></script>
<script type="text/javascript" src="/resource/js/common.js"></script>
<script type="text/javascript" src="/resource/js/toolkit.js"></script>
<script type="text/javascript" src="/resource/js/matchpicker/matchpicker.js"></script>
<script type="text/javascript" src="/resource/js/datepicker/datepicker.js"></script>
<script type="text/javascript">
	var MenuIndex = 2;
	var NoteGuid = "${noteGuid}";
	var ChatOffset = 0;
	var ChatSize = 20;
	var ReplyGuid = "";
	var ChatMap = {};
	var IsInFull = false;
	$(document).ready(function(){
		getMore();
		$("#ipt_cmt_name").click(function(){
			if($(this).val().trim()=="匿名") {
				$(this).val("").addClass("on");
			} 
		}).blur(function(){
			if($(this).val().trim()=="匿名" || $(this).val().trim()=="") {
				$(this).val("匿名").removeClass("on");
			} 
		});
		$("#ta_cmt_msg").click(function(){
			if($(this).val().trim()=="内容...") {
				$(this).val("").addClass("on");
			} 
		}).blur(function(){
			if($(this).val().trim()=="内容..." || $(this).val().trim()=="") {
				$(this).val("内容...").removeClass("on");
			} 
		});
	});
	
	formatObj = function(obj) {
		var html = "";
		html+='<div id="'+obj.guid+'" class="item">';
		html+='<div><span>'+obj.createTime.date()+'</span><h4>'+obj.name+' ['+obj.ip+']<a onclick="reply(\''+obj.guid+'\')">[回复]</a></h4></div>';
		if(obj.fatherChat!=null) {
			var father = obj.fatherChat;
			html+='<div class="quote">';
			html+='<div><span>'+father.createTime.date()+'</span><h4>'+father.name+' ['+father.ip+']</h4></div>';
			html+='<p><a href="#'+father.guid+'">'+father.content+'</a></p>';
			html+='</div>';
		}
		html+='<p>'+obj.content+'</p>';
		html+='</div>';
		return html;
	}
	
	getMore = function(){
		ChatSize = parseInt($("#ipt_more_size").val().trim(), 10);
		$.ajax({
			type : "get",
			url : "/blog/ajax/notechat"
				+"?ts="+new Date().getTime(),
			dataType : "json",
			data: {note: NoteGuid, offset: ChatOffset, size: ChatSize}
		}).done(function(result){
			if(result.isTrue) {
				var html = "";
				for(var i=0; i<result.tag.length; i++) {
					var obj = result.tag[i];
					ChatMap[obj.guid] = obj;
					html += formatObj(obj);
				}
				$("#div_comments").append(html);
				ChatOffset += ChatSize;
				if(result.tag.length<ChatSize) {
					$(".moreItems").html('<a class="off">MORE</a><input type="text" class="off" value="0" readonly="readonly" />');
				}
			} else {
				$.showAlert(result.message, "确定");
			}
		}).fail(function(){
			$.showAlert("网络繁忙，请稍后再试！", "确定");
		});
	};

	reply = function(guid){
		ReplyGuid = guid;
		$("#lb_reply_name").html("回复["+ChatMap[guid].name+"]");
		$("#ipt_cmt_name").focus();
	};
	
	clearCmt = function(){
		ReplyGuid = "";
		$("#lb_reply_name").html("");
		$("#ipt_cmt_name").val("匿名").removeClass("on");
		$("#ta_cmt_msg").val("内容...").removeClass("on");
	};
	
	sendCmt = function(){
		var name = $("#ipt_cmt_name").val().trim();
		var content = $("#ta_cmt_msg").val().trim();
		if(content=="") {
			$.showAlert("请输入内容！", "确定");
			return;
		} 
		if(name=="") {
			name = "匿名";
		}
		$.ajax({
			type : "post",
			url : "/blog/ajax/comment"
				+"?ts="+new Date().getTime(),
			dataType : "json",
			data: {note: NoteGuid, name: name, content: content, reply: ReplyGuid}
		}).done(function(result){
			if(result.isTrue) {
				var obj = result.tag;
				ChatMap[obj.guid] = obj;
				var html = formatObj(obj);
				$("#div_comments").append(html);
				clearCmt();
			} else {
				$.showAlert(result.message, "确定");
			}
		}).fail(function(){
			$.showAlert("网络繁忙，请稍后再试！", "确定");
		});
	};
	
	viewInFull = function() {
		if(IsInFull) {
			$("#div_note_bg").hide();
			$("#section_content").removeClass("full");
			$("body").find(".fullView").html("全屏查看");
		} else {
			$("#div_note_bg").css({
	            "height": $(document).height() + "px",
	            "width": $(document).width() + "px",
	            "zIndex": 999
	        }).show();
			$("#section_content").addClass("full");
			$("body").find(".fullView").html("退出全屏");
		}
		IsInFull = !IsInFull;
	};
	
</script>
</head>
<body class="bg">
	<div id="section_left" class="leftBlock">
		<jsp:include page="/resource/pages/left.html"></jsp:include>
	</div>
	
	<div id="section_right" class="rightBlock">
		<jsp:include page="/resource/pages/menu.html"></jsp:include>
		<div id="section_content" class="contentBlock">
			<h2 class="normal noteTitle">${noteTitle} <a class="fullView" onclick="viewInFull();">[全屏查看]</a></h2>
			<div class="noteSubTitle">
				<div style="clear: both;">${noteTags}</div>
				<span>${noteUpdate}</span>
				<a class="text">阅读[${noteView}]</a><a class="text">评论[${noteChat}]</a>
				<a class="fullView" onclick="viewInFull();">全屏查看</a>
			</div>
			<h3 class="normal"></h3>
			<div class="noteContent">
				${noteContent}
			</div>
			<div id="div_comments">
				<!--  
				<div class="item">
					<div>
						<span>2013-12-20 20:34</span>
						<h4>张三 [192.168.12.153]<a>[回复]</a></h4>
					</div>
					<div class="quote">
						<div>
							<span>2013-12-20 20:34</span>
							<h4>张三 [192.168.12.153]</h4>
						</div>
						<p><a>
							若引用的标准文件标有日期,则在此日期以后对此引用标准文件的增补和修订均不适用于本标准。若引用的文件不标日期,则本标准应采用该引用标准文件的最新版本。 
							</a>
						</p>
					</div>
					<p>
						若引用的标准文件标有日期,则在此日期以后对此引用标准文件的增补和修订均不适用于本标准。若引用的文件不标日期,则本标准应采用该引用标准文件的最新版本。 
					</p>
				</div>
				<div class="item">
					<div>
						<span>2013-12-20 20:34</span>
						<h4>张三 [192.168.12.153]<a>[回复]</a></h4>
					</div>
					<p>
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting
					</p>
				</div>
				-->
			</div>
			<div class="moreItems">
				<a onclick="getMore();">MORE</a>
				<input id="ipt_more_size" type="text" value="20" onkeyup="value=this.value.replace(/\D+/g,'');" />
			</div>
			<div id="div_comment" class="noteComment">
				<input id="ipt_cmt_name" type="text" value="匿名" /><label id="lb_reply_name"></label>
				<textarea id="ta_cmt_msg">内容...</textarea>
				<span><a class="clear" onclick="clearCmt();">清空</a><a class="send" onclick="sendCmt();">发送</a></span>
			</div>
			<div style="clear: both; height: 30px;"></div>
		</div>
	</div>
	
	<jsp:include page="/resource/pages/foot.html"></jsp:include>

	<div id="div_note_bg" style="position: absolute; display: none; left: 0px; top: 0px; background: #fff;">
	
	</div>
</body>
</html>



